<script src="echo.js"></script>
<template>
  <el-cascader ref="cascaderRef" v-model="regionArr" filterable :options="regionData"
               :props="{ expandTrigger: 'hover',checkStrictly:true }" :emitPath="true" @change="handleChange" clearable placeholder="地区查询" />
</template>

<script>
import { region } from "./region.js";
export default {
  name: "SelectRegion",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    value: {
      handler(val) {
        this.regionArr = Array.isArray(val) ? val : [];
      },
      immediate: true,
    },
  },
  data() {
    return {
      regionData: region,
      regionArr: [],
    };
  },
  methods: {
    handleChange(val) {
      // 添加个异步操作，不然获取到的值总是上一次变化的值
      setTimeout(() => {
        const params = {
          label: this.$refs.cascaderRef.inputValue,
          value: val,
        };
        //console.log(this.$refs.cascaderRef);
        this.$emit("change", params);
      }, 100);
      this.$emit("input", this.regionArr);
    },
  },
};
</script>

<style>
</style>
